<template>
	<view class="page">
		<customtop top_title="项目进度"></customtop>
		<view class="abb_show" v-if="!loading">
			<view class="">
				<view class="pagebox topinfo">
          <view class="name">{{abb.title}}</view>
					<view class="price price_color">加盟费：¥{{abb.jiamengfei}}</view>
				</view>

				<view class="pagebox typelist">
				  <view class="bd">
				    <view class="it1">割必赔</view>
				    <view class="it1">项目已上押：{{abb.deposit}}元</view>
				    <view class="items">
				      <view class="item"><span class="span span1">浏览次数</span><span class="span span2">{{abb.click}}</span></view>
				      <view class="item"><span class="span span1">项目编号</span><span class="span span2">{{abb.id}}</span></view>
				      <view class="item"><span class="span span1">达成意向</span><span class="span span2">占位</span></view>
				      <view class="item"><span class="span span1">发布时间</span><span class="span span2">{{abb.created_at_show}}</span></view>
				      <view class="item none"><span class="span span1">项目加盟费</span><span class="span span2">¥{{abb.jiamengfei}}</span></view>
				      <view class="item none"><span class="span span1">项目保证金</span><span class="span span2">¥{{abb.deposit}}</span></view>
				    </view>
				  </view>
				</view>

				<view class="pagebox flow">
					<view class="stitle">任务进度</view>
					<view class="bd">
						<view class="line"></view>
						<view class="items">
							<view class="item">
								<span class="span span1 on">
									<i class="iconfont icon-dahaoxuanzhongbeijingeps"></i>
								</span>
								<span class="span span2">确定合作</span>
								<span class="span span3">已完成</span>
							</view>
							<view
                class="item"
                v-for="(item, index) in config.abb.nodes"
                :key="index"
                v-if="index < 4"
              >
                <span v-if="order.node > index">
                  <span class="span span1 on">
                  	<i class="iconfont icon-dahaoxuanzhongbeijingeps"></i>
                  </span>
                  <span class="span span2">{{item.name}}</span>
                  <span class="span span3">已完成</span>
                </span>
                <span v-if="order.node == index">
                  <span class="span span1 current">
                  	<i class="iconfont icon-genghuan"></i>
                  </span>
                  <span class="span span2">{{item.name}}</span>
                  <span class="span span3">进行中</span>
                </span>
                <span v-if="order.node < index">
                  <span class="span span1">
                  	<i class="iconfont icon-dahaoxuanzhongbeijingeps"></i>
                  </span>
                  <span class="span span2">{{item.name}}</span>
                  <span class="span span3">未开始</span>
                </span>
							</view>
						</view>
					</view>
				</view>

        <view class="pagebox actionbox">
        	<view class="stitle">当前操作</view>
        	<view class="bd" v-if="order.node < config.abb.max_node">
            <view class="msg" v-if="!order.confirm_node_log_shop">项目主未确认</view>
            <view class="msg" v-if="order.confirm_node_log_shop">项目主已于 {{order.confirm_node_log_shop.created_at}} 确认完成</view>
            <view class="msg" v-if="order.confirm_node_log_user">已于 {{order.confirm_node_log_user.created_at}} 确认完成</view>
            <view class="luckbtn luckbtn-default" @click="confirmNode" v-if="!order.confirm_node_log_user">确认完成{{current_node.name}}</view>
          </view>
          <view class="bd" v-if="order.node >= config.abb.max_node">
            <view class="msg">流程已完成</view>
          </view>
        </view>
			</view>
		</view>

	</view>
</template>

<script>
import { request, upload } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"
export default {
	components: { customtop },

	data() {
		return {
      loading: true,
      config: {
        abb: {}
      },
      abb: {
        images: []
      },
      order: {},
      current_node: {},
    }
	},

	onLoad(options) {
    request.post('/common/getConfig', this.params).then(res => {
      this.config = res.data;
    })
    this.id = options.id;
    uni.showLoading();
    this.getOrder();
	},

  onShow: function() {
    request.post('/user/getLoginUser').then(res => {
      if (!res.data.id) {
        let that = this;
        uni.showModal({
          title: '提示',
          content: '需先登录',
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/account/login_password' });
            } else {
              uni.navigateBack();
            }
          }
        });
      }
    })
  },

	methods: {
    getOrder: function() {
      request.post('/abb/getOrder', {id: this.id}).then(res => {
        uni.hideLoading();
        this.loading = false;
        this.order = res.data.order;
        this.abb = res.data.abb;
        this.current_node = res.data.current_node;
      })
    },

    confirmNode: function(id) {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '确认完成该节点，双方确认后，将进入到下一个节点',
        success (res) {
          if (res.confirm) {
            uni.showLoading();
            request.post('/abb/confirmNode', { id: that.order.id, type: 'user' }).then((res) => {
              uni.hideLoading();
              if (res.code == 200) {
                that.getOrder();
                uni.showToast({ title: '操作成功', icon: 'none' });
              } else if (res.code == 400) {
                uni.showModal({ showCancel: false, content: res.message });
              } else {
                uni.showToast({ title: '操作失败', icon: 'none',  mask: true });
              }
            });
          }
        }
      })
    },

    previewImages: function(current) {
      let urls = [];
      this.abb.images.map((item, index) => {
        urls.push(item.image);
      })
      uni.previewImage({
        current: current,
        urls: urls
      })
    },

		switchTab: function(url) {
			uni.switchTab({ url: url });
		},

		jumpPage: function(url) {
			uni.navigateTo({ url: url })
		}
	}
}
</script>

<style>
@import url("abb.css");
page {
	padding-bottom: 30rpx;
  background-color: #fff;
}
</style>
